<template>
	<view style="margin: 0 50rpx 0;">
		
		<view style="padding-top: 50rpx;">
			<view style="text-align: center;font-size: 30rpx;color: #1a1a1a;">验证码已发送至手机</view>
			<view style="font-size: 32rpx;color: #f98b05;text-align: center;margin-top: 10rpx;">
				<text>{{ getThree }}</text>
				<text style="padding-left: 10rpx;">{{ getFour }}</text>
				<text style="padding-left: 10rpx;">{{ getLastFour }}</text>
			</view>
		</view>
		
		<view class="password-wrapper">
			<input type="number" class="input-box" focus maxlength="4" v-model="numList" @input="inputNumber">
			<!-- 验证码 -->
			<view class="code">
				<view>{{ numList[0] }}</view>
				<view>{{ numList[1] }}</view>
				<view>{{ numList[2] }}</view>
				<view>{{ numList[3] }}</view>
			</view>
		</view>
		
		<view class="retry-code" v-show="!flag">
			<button @click="recend">重发验证码</button>
		</view>
		<view class="retry-code" v-show="flag">
			<view>
				<text>{{ countDown }}</text>
				<text>后</text>
				<text>重发验证码</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { sendCodeFour, bindMobile } from '../../api'
	export default {
		data() {
			return {
				number: '', // 电话号码
				numList: '', // 验证码
				isShow: false, 
				disabled: false, // 发送验证码是否禁用
				btntxt: '重发验证码',
				time: 0, // 60s定时器
				countDown: '',
				flag: false,
				id: '',
				active: ''
				
			}
		},
		// 页面加载完成时候
		onLoad(option) {
			console.log(option)
			this.number = option.phone
			this.id = option.id
			this.active = option.active
		},
		computed: {
			getThree() {
				return this.number.substring(0, 3)
			},
			getFour() {
				return this.number.substring(3, 7)
			},
			getLastFour() {
				return this.number.substring(7)
			}
		},
		methods: {
			inputNumber(e) {
				console.log(e.detail.value.length)
				if (e.detail.value.length === 4) {
					// uni.showModal({
					// 	content: '来了老弟',
					// 	showCancel: false
					// });
					console.log(e.detail.value)
					let data = {mobile:this.number,code:e.detail.value}
					bindMobile(data, (res) => {
						if (res.code != 0) {
							uni.showToast({
					　　　　　　 title: res.message,
					　　　　　　 icon: 'none'
					　　　　 })
						} else {
							uni.showToast({
					　　　　　　 title: "绑定成功",
					　　　　　　 icon: 'none'
					　　　　 })
							console.log("this.id")
							console.log(this.id)
							console.log("this.id")
							if (this.active === '1') {
								setTimeout(()=>{
									uni.navigateTo({
										url: `/pages/userinfo/userinfo?id=${this.id}`
									})
								},500)
							} else{
								setTimeout(()=>{
									uni.switchTab({
										url: '/pages/user/user'
									})
								},500)
							}
						}
					})
					
				}
			},
			// 重发验证码
			recend() {
				this.time = 60
				let params = {mobile: this.number,channel:1}
				sendCodeFour(params, (res) => {
					if (res.code != 0) {
						uni.showToast({
				　　　　　　 title: res.message,
				　　　　　　 icon: 'none'
				　　　　 })
					} else{
						this.timer()
						uni.showToast({
				　　　　　　 title: "发送成功",
				　　　　　　 icon: 'none'
				　　　　 })
					}
					
				})
			},
			timer() {
				if (this.time > 0) {
					this.flag = true
					this.time --
					this.time < 10 ? this.time = "0" + this.time : this.time
					this.countDown = "00:" + this.time
					setTimeout(this.timer, 1000)
				} else{
					this.time = 0
					this.flag = false
				}
			},
			
		}
	}
</script>

<style lang='scss'>
	.password-wrapper {
		margin-top: 100rpx;
		position: relative;
		.input-box{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			color: transparent;
			opacity: 0;
		 }
		.code {
			display: flex;
			justify-content: space-around;
			view {
				width: 100rpx;
				height: 110rpx;
				border-bottom: 2rpx solid #cccccc;
				text-align: center;
				font-size: 80rpx;
				padding-bottom: 10rpx;
				color: #1a1a1a;
			}
		}
	}
	.retry-code {
		position: relative;
		margin-top: 45rpx;
		button {
			font-family: SourceHanSansCN-Regular;
			font-size: 24rpx;
			color: #333;
			
		}
		view {
			position: absolute;
			left: 34%;
			top: 0;
			font-size: 24rpx;
			text:nth-child(1) {
				color: #1a1a1a;
			}
			text:nth-child(2) {
				color: #9a9a9a;
				padding: 0 20rpx 0 10rpx;
			}
			text:nth-child(3) {
				color: #9a9a9a;
			}
		}
	}
	uni-button {
	    background-color: transparent;
		display: flex;
		position: absolute;
		left: 47.5%;
		top: -24rpx;
	}
	uni-button:after {
	    width: 100%;
	    border: none;
	}
</style>
